<template>
	<view class="container-bg">
		<u-navbar title="订单详情" placeholder bgColor="#F6F7FB" :autoBack="true"></u-navbar>

		<view class="centerXY columnY mar-top-52 mar-bottom-28">

			<image v-if="info.pay_status == 2" class="status" src="../../static/icon/market-submit.png"></image>
			<image v-else class="status" src="../../static/icon/order-cancel.png"></image>

			<view v-if="info.pay_status == 1" class="color-theme font-28">待支付</view>
			<view v-if="info.pay_status == 2" class="success font-28">已出售，结算成功</view>
			<view v-if="info.pay_status == 3" class="color-theme font-28">已取消</view>
			<view v-if="info.pay_status == 4" class="color-theme font-28">订单超时已取消</view>
			<view v-if="info.pay_status == 5" class="color-theme font-28"></view>

			<view v-if="info.pay_status == 1" class="mar-top-20 font-24 color-theme  centerXY">
				<view>支付倒计时</view>
				<u-count-down class="mar-left-10" @finish="hanldeFinish" :time="countDown(info.end_pay_at,newTime)"
					format="mm:ss"></u-count-down>
			</view>
		</view>

		<view class="bg-white pad-32 mar-top-60 goods-box">
			<view class="centerY pad-16">
				<image class="goods-image radius16" v-if="ext.product_info" :src="ext.product_info.cover"
					mode="aspectFill">
				</image>
				<view class="mar-left-20 betweenY goods-info">
					<view v-if="ext.product_info" class="font-28 font-w-600">{{ext.product_info.name}}</view>
					<view class="font-24 color-grey">数量：x1</view>
				</view>
			</view>
			<view class="order-info">

				<view class="pad-bottom-16 font-w-500 font-30">订单管理</view>
				<view class="cell betweenX pad-top-bottom-16 font-28">
					<view class="color-grey">订单金额：</view>
					<view>￥{{info.amount}}</view>
				</view>
				<view class="cell betweenX pad-top-bottom-16 font-28">
					<view class="color-grey">订单ID号：</view>
					<view class="centerY">
						<text>{{info.order_no}}</text>
						<setCopy :content="info.order_no" class="centerY">
							<template v-slot:content>
								<image class="copy" src="../../static/icon/copy-dark.png"></image>
							</template>
						</setCopy>
					</view>
				</view>

				<!-- <view class="cell betweenX pad-top-bottom-16 font-28">
					<view class="color-grey">分账ID号：</view>
					<view class="centerY">
						<text>952472****9D989130C7</text>
						<image class="copy" src="../../static/icon/copy-dark.png"></image>
					</view>
				</view> -->
				<!-- 
				<view class="pad-bottom-16 mar-top-32 font-w-500 font-30">订单状态</view>
				<u-steps current="3" direction="column" dot class="mar-top-16" activeColor="#df0007">
					<u-steps-item class="steps" title="上架成功" desc="">
					</u-steps-item>
					<u-steps-item class="steps" title="锁定中" desc=""></u-steps-item>
					<u-steps-item class="steps color-theme" title="已售出.结算成功 (2024-07-06 18:10:43)"
						desc=""></u-steps-item>
				</u-steps> -->
			</view>
		</view>

		<!-- 选择支付方式 -->
		<view v-if="info.pay_status == 1" class="pad-left-right-24">
			<view class="pad-top-bottom-24 bg-white mar-top-24 radius24">
				<view class="cell betweenX pad-24 font-28" v-for="(item,index) in payList" :key="index">
					<view class="color-grey">{{item.name}}</view>
					<view class="icon-box" v-if="item.isShow" @click="hanldeTypePay(index)">
						<u-icon v-if="pay == index" size="16" color="#df0007" name="checkbox-mark"></u-icon>
					</view>
					<view v-else @click="hanldePayList(item.id)" class="button-pay">去开通</view>
				</view>
			</view>
		</view>

		<my-popup :title="info.amount" content="您确认购买吗？" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeLogin"></my-popup>
		<view class="button-box pad-left-right-32 pad-top-bottom-6 bg-white centerY">
			<view v-if="info.pay_status == 1" class="centerY flex-w">
				<!-- <view class="cancel">取消订单</view> -->
				<view @click="hanldePay" class="confirm button flex-w text-center">确认支付</view>
			</view>
			<view v-else class="button flex-w" @click="hanldeMyMarket">返回商城</view>
		</view>
	</view>
</template>

<script>
	import {
		userOrderDetail,
		cashierPay,
		payPlat,
		openWallet,
		userWalletOPen
	} from '@/config/api.js'
	export default {
		data() {
			return {
				ext: {},
				info: {},
				// 弹框
				isPopup: false,
				// 当前时间
				newTime: parseInt(new Date().getTime() / 1000),
				// 开通了几个支付
				isPay: 0,
				// 支付列表
				payList: [],
				// 默认支付方式
				pay: 0,
				// 支付方式
				pay_plat: 0
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.orderInfo();
			this.getPayPlat();
		},
		methods: {
			// 开通钱包
			hanldePayList(platId) {
				uni.showLoading({
					title: '开通中...'
				})

				userWalletOPen({
					plat_id: platId
				}).then(res => {
					let {
						open_data
					} = res.data;

					uni.hideLoading();
					if (open_data != "") {
						// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pages/web-view/web-view?url=' + open_data.redirect_url
						})
						// #endif
						// #ifdef H5
						window.location.href = open_data.redirect_url
						// #endif
					} else {
						uni.$u.toast('正在对接，敬请期待~');
					}
				})
			},
			// 获取平台支付方式
			getPayPlat() {
				payPlat().then(pay => {
					let {
						lists
					} = pay.data;
					// 获取自己开通的钱包
					openWallet().then(res => {
						let {
							yes
						} = res.data;

						lists.map(item => {
							item.isShow = false;
							for (let key in yes) {
								if (item.id == key) {
									item.isShow = true;
									this.isPay++
								}
							}
						})

						// 判断开通了几个钱包 全部开通选择第一个钱包
						for (let i = 0; i < lists.length; i++) {
							if (this.isPay == lists.length) {
								this.pay = 0;
								break;
							} else {
								if (lists[i].isShow) {
									this.pay = i;
									break;
								}
							}
						}

						this.payList = lists;
					})
				})
			},
			// 倒计时计算 time - time1 *1000
			countDown(time, time1) {
				return (time - time1) * 1000;
			},
			// 倒计时结束
			hanldeFinish() {
				this.info.pay_status = 4;
			},
			// 判断环境
			getEnvironment() {
				// #ifdef APP-PLUS
				return 'app'
				// #endif

				// #ifdef H5
				return 'wap'
				// #endif
			},
			// 重新支付
			hanldeLogin() {
				// 支付订单
				cashierPay({
					order_id: this.info.id,
					pay_plat: this.payList[this.pay].id,
					os: this.getEnvironment
				}).then(res => {
					uni.hideLoading();
					let {
						pay_data
					} = res.data;
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/web-view/web-view?url=' + pay_data.pay_url
					})
					// #endif
					// #ifdef H5
					window.location.href = pay_data.pay_url
					// #endif
				})
			},
			hanldeMyMarket() {
				uni.switchTab({
					url: '/pages/shopmall/shop'
				})
			},
			// 立即支付
			hanldePay() {
				this.isPopup = true;
			},
			// 我的订单详情
			orderInfo() {
				userOrderDetail({
					id: this.orderId
				}).then(res => {
					let {
						info: {
							ext_info: ext
						},
						info
					} = res.data;

					this.ext = ext;
					this.info = info;
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container-bg {
		min-height: 100vh;
		padding-bottom: 100rpx;
		background: $uni-bg-page;

		.icon-box {
			width: 30rpx;
			flex-shrink: 0;
			height: 30rpx;
			border: 1rpx solid #c8c9cc;
			border-radius: 50%;
		}

		.button-pay {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
		}

		::v-deep .u-count-down__text {
			display: block;
			// width: 110rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: $uni-theme;
		}


		.status {
			display: block;
			width: 112rpx;
			height: 112rpx;
		}

		.success {
			color: #59bb73;
		}

		.goods-box {
			border-radius: 24rpx 24rpx 0 0;

			.goods-image {
				display: block;
				width: 160rpx;
				height: 160rpx;
			}

			.goods-info {
				height: 160rpx;
			}
		}

		.order-info {
			margin-top: 48rpx;

			.copy {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.steps {
			padding-bottom: 60rpx;

			::v-deep .u-steps-item__wrapper__dot {
				width: 10rpx;
				height: 10rpx;
			}
		}

		.color-theme {
			::v-deep .u-text__value {
				color: $uni-theme;
			}
		}

		.button-box {
			position: fixed;
			width: 100%;
			bottom: 0;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: linear-gradient(270deg, #df0007, #df0007);
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				font-size: 30rpx;
				box-sizing: border-box;
			}

			.cancel {
				width: 240rpx;
				box-sizing: border-box;
				border: 1rpx solid $uni-theme;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				color: $uni-theme;
				margin-right: 20rpx;
				font-size: 30rpx;
			}
		}
	}
</style>